<script setup lang="ts">
import { ref } from 'vue'
import PaginationBar from '@/components/common/PaginationBar.vue'
import tableData from './dialogue_list_data'
const showBorder = ref(false)
</script>

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :border="showBorder">
      <el-table-column type="expand">
        <template #default="props">
          <div>
            <el-table :data="props.row.messages" :show-header="false" :border="showBorder">
              <el-table-column type="index" />
              <el-table-column label="会话ID" prop="sessionId" />
              <el-table-column label="消息内容" prop="messageContent" />
              <el-table-column label="用户名" prop="username" />
              <el-table-column label="发送时间" prop="sendTime" />
              <el-table-column label="操作" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="会话ID" prop="sessionId" />
      <el-table-column label="消息内容" />
      <el-table-column label="用户名" />
      <el-table-column label="发送时间" />
      <el-table-column label="操作">
        <template #default>
          <el-button link type="primary">查看会话详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <pagination-bar />
    </div>
  </div>
</template>

<style scoped>
.pagination {
  padding: 20px 0;
}
</style>
